<template>
	<div class="updateForm">
		<el-dialog title="增加房间预约" :visible="dialogFormVisible" @close="$emit('closeDialog')" width="50%">
			<el-form :label-position="labelPosition" label-width="150px" :model="addForm">
				<el-form-item label="房间类型(1.豪华,2.双人,3.单人)" :required="true">
					<el-input v-model="addForm.item_id"></el-input>
				</el-form-item>
				<el-form-item label="用户id" :required="true">
					<el-input v-model="addForm.user_id"></el-input>
				</el-form-item>
				<div class="block">
					<span class="demonstration">预约时间</span>
					<el-date-picker v-model="check_time" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"  :default-time="['12:00:00']">
					</el-date-picker>
				</div>
				<el-form-item label="预约房间数目" :required="true">
					<el-input v-model="addForm.amount"></el-input>
				</el-form-item>
				<el-form-item label="预约房间总价格" :required="true">
					<el-input v-model="addForm.price"></el-input>
				</el-form-item> 
				<!-- <el-form-item label="状态" :required="true">
					<el-input v-model="addForm.status"></el-input>
				</el-form-item> -->
			<!-- </el-form> -->
			<!-- <imgUpload @uploaded="uploaded" @uploadFail="uploadFail" :size="500" :urlTemp="addForm.avatar_url"></imgUpload> -->
			<el-form-item label="状态(1:正常, 2:停用)" :required="true">
				<el-input v-model="addForm.status"></el-input>
			</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="$emit('closeDialog')">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	// import imgUpload from "../imgUpload";
	export default {
		name: "UserAdd",
		props: ["dialogFormVisible", "addTemp", "urlTemp"],
		data() {
			return {
				labelPosition: "right",
				check_time:"",
				addForm: {
					item_id: "",
					user_id: "",
					checkin_time: "",
					checkout_time: "",
					amount: "",
					price: "",
					status: ""
				},

			};
		},
		watch: {
			addTemp: function(obj) {
				console.log(obj);

				this.addForm = { ...obj
				};
			}
		},
		methods: {
			submit: async function() {
				this.addForm.checkin_time=this.check_time[0].valueOf();
				this.addForm.checkout_time=this.check_time[1].valueOf();
				console.log(this.addForm)
				let data = await this._axios
					.post("/ycw/rooms/addAppointmemt", this.addForm)
					.then(data => data.data);
				console.log(data);
				if (data) {
					this.$alert(`${data.msg}`, {
						confirmButtonText: "确定",
						callback: () => {
							this.$message({
								type: "warning",
								message: `${data.msg}`
							});
							this.$emit("refresh");
						}
					});
					this.addForm = {
						phone: "",
						password: "",
						nickname: "",
						points: "",
						status: "",
						avatar_url: ""
					};
				}
			},
			// uploaded: function(res) {
			// 	console.log(this.OldImageUrl);
			// 	this.OldImageUrl = this.addForm.avatar_url;
			// 	this.addForm.avatar_url = res.path;
			// },
			uploadFail: function(res) {
				console.log(res);
				//上传错误处理
			}
		},
		components: {
			// imgUpload
		}
	};
</script>

<style lang="scss">
	.updateForm {
		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}

		.avatar-uploader .el-upload:hover {
			border-color: #409eff;
		}

		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 178px;
			height: 178px;
			line-height: 178px;
			text-align: center;
		}

		.avatar {
			width: 178px;
			height: 178px;
			display: block;
		}
	}
</style>
